<!--书库列表-->

<template>
    <div>
        <el-row :gutter="20" class="toolbar">
            <el-col :span="4">
                <el-input placeholder="请输入书籍ID" v-model="filters.id" clearable></el-input>
            </el-col>
            <el-col :span="4">
                <el-select v-model="filters.cpName" placeholder="请选择来源" clearable>
                    <el-option label="伏天" value="伏天"></el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="filters.hasEnd" placeholder="请选择状态" clearable>
                    <el-option label="连载" value="SERIAL"></el-option>
                    <el-option label="完结" value="FINISH"></el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="filters.status" placeholder="请选择状态" clearable>
                    <el-option label="上线" value="ON"></el-option>
                    <el-option label="下线" value="OFF"></el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </el-col>
        </el-row>

        <el-row class="actions">
            <el-button type="primary" @click="showAddBookDialog">新增</el-button>
            <el-button type="success" @click="exportData" :disabled="!selected.length">导出</el-button>
        </el-row>

        <el-table :data="books" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="书籍ID" width="80"></el-table-column>
            <el-table-column prop="cpName" label="书籍来源"></el-table-column>
            <el-table-column prop="bookName" label="书籍名称"></el-table-column>
            <el-table-column prop="cover" label="封面">
                <template #default="scope">
                    <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row.cover"
                            :preview-src-list="[scope.row.cover]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="wordCount" label="字数"></el-table-column>
            <el-table-column prop="channel" label="频道"></el-table-column>
            <el-table-column prop="hasEnd" label="是否完结">
                <template #default="scope">
                    <el-tag :type="scope.row.hasEnd == 'FINISH' ? 'success' : 'info'">
                        {{ scope.row.hasEnd == 'FINISH' ? '完结' : '连载' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="上架状态">
                <template #default="scope">
                    <el-tag :type="scope.row.status === 'ON' ? 'success' : 'danger'">
                        {{ scope.row.status === 'ON' ? '上线' : '下线' }}
                    </el-tag>

                </template>
            </el-table-column>

            <el-table-column prop="priceWord" label="千字价格(分)"></el-table-column>
            <el-table-column prop="introduction" label="简介"></el-table-column>
            <el-table-column prop="authorizeFrom" label="授权开始时间"></el-table-column>
            <el-table-column prop="authorizeTo" label="授权结束时间"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" fixed="right">
                <template #default="scope">
                    <el-button @click="editBook(scope.row)" type="text" size="small" style="margin-left: -10px">修改</el-button>
                    <el-button @click="importChapter(scope.row)" type="text" size="small" style="margin-left: -20px">导入章节</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="导入章节" v-model="dialogVisible" width="500px">
            <el-form>
                <el-form-item label="导入方式">
                    <el-select v-model="importMethod" placeholder="请选择导入方式">
                        <el-option label="全量导入" value="full"></el-option>
                        <el-option label="增量导入" value="increment"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-upload
                            class="upload-demo"
                            drag
                            action="#"
                            :file-list="fileList"
                            :auto-upload="false"
                            :on-change="handleFileChange">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleFileUpload">导入文本</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog title="添加书籍" v-model="addBookDialogVisible" width="600px">
            <el-form :model="newBook" label-width="120px">
                <el-form-item label="书籍名称" required>
                    <el-input v-model="newBook.name" placeholder="请输入书籍名称"></el-input>
                </el-form-item>
                <el-form-item label="封面" required>
                    <el-upload
                            class="avatar-uploader"
                            action="#"
                            :show-file-list="false"
                            :on-success="handleCoverUploadSuccess"
                            :before-upload="beforeCoverUpload">
                        <img v-if="newBook.cover" :src="newBook.cover" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="字数">
                    <el-input-number v-model="newBook.wordCount" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="收费章节">
                    <el-input-number v-model="newBook.chargeChapter" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="千字/分">
                    <el-input-number v-model="newBook.price" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="newBook.author" placeholder="请输入作者"></el-input>
                </el-form-item>
                <el-form-item label="频道" required>
                    <el-select v-model="newBook.channel" placeholder="请选择频道">
                        <el-option label="男频" value="male"></el-option>
                        <el-option label="女频" value="female"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="来源" required>
                    <el-select v-model="newBook.source" placeholder="请选择来源">
                        <el-option label="伏天" value="伏天"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否完结" required>
                    <el-select v-model="newBook.isComplete" placeholder="请选择是否完结">
                        <el-option label="是" value="true"></el-option>
                        <el-option label="否" value="false"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上架状态">
                    <el-select v-model="newBook.status" placeholder="请选择上架状态">
                        <el-option label="启用" value="enabled"></el-option>
                        <el-option label="禁用" value="disabled"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="授权开始时间">
                    <el-date-picker v-model="newBook.startTime" type="date" placeholder="请选择授权开始时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="授权结束日期">
                    <el-date-picker v-model="newBook.endTime" type="date" placeholder="请选择授权结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="篇幅">
                    <el-select v-model="newBook.nativePlace" placeholder="请选择篇幅">
                        <el-option label="长篇" value="unknown"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="newBook.summary" type="textarea" placeholder="请输入简介"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="newBook.remarks" type="textarea" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addBookDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmAddBook">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改书籍" v-model="updateBookDialogVisible" width="600px">
            <el-form :model="updateBook" label-width="120px">
                <el-form-item label="书籍名称" required>
                    <el-input v-model="updateBook.bookName" placeholder="请输入书籍名称"></el-input>
                </el-form-item>
                <el-form-item label="封面" required>
                    <el-upload
                            class="avatar-uploader"
                            action
                            accept=".jpg, .png, .gif, .jpeg, .webp"
                            :show-file-list="false"
                            :on-success="handleCoverUploadSuccess"
                            :http-request="customHttpRequest">
                        <img v-if="updateBook.cover" :src="updateBook.cover" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="字数">
                    <el-input-number v-model="updateBook.wordCount" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="收费章节">
                    <el-input-number v-model="updateBook.priceChapter" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="千字/元">
                    <el-input-number v-model="updateBook.priceWord" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="updateBook.author" placeholder="请输入作者"></el-input>
                </el-form-item>
                <el-form-item label="频道" required>
                    <el-select v-model="updateBook.channel" placeholder="请选择频道">
                        <el-option label="男频" value="MAN"></el-option>
                        <el-option label="女频" value="WOMAN"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="来源" required>
                    <el-select v-model="updateBook.cpName" placeholder="请选择来源">
                        <el-option label="伏天" value="伏天"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否完结" required>
                    <el-select v-model="updateBook.hasEnd" placeholder="请选择是否完结">
                        <el-option label="完结" value="FINISH"></el-option>
                        <el-option label="连载" value="SERIAL"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上架状态">
                    <el-select v-model="updateBook.status" placeholder="请选择上架状态">
                        <el-option label="上线" value="ON"></el-option>
                        <el-option label="下线" value="OFF"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="授权开始时间">
                    <el-date-picker v-model="updateBook.authorizeFrom" type="date" placeholder="请选择授权开始时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="授权结束日期">
                    <el-date-picker v-model="updateBook.authorizeTo" type="date" placeholder="请选择授权结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="篇幅">
                    <el-select v-model="updateBook.lengthType" placeholder="请选择篇幅">
                        <el-option label="微型" value="MINITURE"></el-option>
                        <el-option label="短篇" value="SHORT"></el-option>
                        <el-option label="中篇" value="NOVE"></el-option>
                        <el-option label="长篇" value="LONG"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="updateBook.introduction" type="textarea" placeholder="请输入简介"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="updateBook.remark" type="textarea" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateBookDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmUpdateBook">确定</el-button>
            </div>
        </el-dialog>
        <div class="pagination-container">
            <el-pagination
                    v-model:current-page="filters.pageNum"
                    v-model:page-size="filters.pageSize"
                    :page-sizes="[5, 10, 20, 30]"
                    :small="small"
                    :disabled="disabled"
                    :background="background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    class="doPage"
            />
        </div>

    </div>

</template>

<script setup>
    import { ref } from 'vue';
    import {baseApi} from "../../api/base";
    import { ElMessage } from 'element-plus';
    import { searchBooks,upImage,updateBooks } from "../../api/book/book";


    const filters = ref({
        id: '',
        hasEnd:'',
        status:'',
        cpName: '',
        pageSize:10,
        pageNum:1
    });
    const books = ref([]);
    const loading = ref(false);

    const dialogVisible = ref(false);
    const addBookDialogVisible = ref(false);
    const updateBookDialogVisible = ref(false);
    const selected = ref([]);
    const pageNum = ref(1);
    const pageSize = ref(10);
    const total = ref(0);

    const newBook = ref({
        name: '',
        cover: '',
        wordCount: 0,
        chargeChapter: 0,
        price: 0,
        author: '',
        channel: '',
        source: '',
        isComplete: '',
        status: '',
        startTime: '',
        endTime: '',
        nativePlace: '',
        summary: '',
        remarks: ''
    });
    const updateBook = ref({
        bookName: '',
        cover: '',
        wordCount: 0,
        priceChapter: 0,
        priceWord: 0,
        author: '',
        channel: '',
        cpName: '',
        hasEnd: '',
        status: '',
        authorizeFrom: '',
        authorizeTo: '',
        lengthType: '',
        introduction: '',
        remark: ''
    });

    const search = () => {
        searchBooks(filters.value).then((res)=>{
            console.log(res)
            books.value=res.data.data.currentData
            total.value=res.data.data.totalRecord
        })
    };

    const reset = () => {
        filters.value = {
            id: '',
            hasEnd: '',
            status: '',
            cpName: ''
        };
        search();
    };

    const showAddBookDialog = () => {
        addBookDialogVisible.value = true;
    };

    const confirmAddBook = () => {
        // 处理添加书籍的逻辑
        console.log('添加书籍:', newBook.value);
        addBookDialogVisible.value = false;
    };
    const confirmUpdateBook = () => {
        // 修改书籍
        console.log('修改书籍:', updateBook.value);
        baseApi(updateBooks(updateBook.value),()=>{
            search()
            updateBookDialogVisible.value = false;
        })
    };

    const handleCoverUploadSuccess = (response, file) => {
        console.log(response,file)
        newBook.value.cover = URL.createObjectURL(file.raw);
    };

    // const beforeCoverUpload = (file) => {
    //     const isJPG = file.type === 'image/jpeg';
    //     const isPNG = file.type === 'image/png';
    //     const isLt2M = file.size / 1024 / 1024 < 2;
    //
    //     if (!isJPG && !isPNG) {
    //         this.$message.error('上传图片只能是 JPG 格式!');
    //         return false;
    //     }
    //     if (!isLt2M) {
    //         this.$message.error('上传图片大小不能超过 2MB!');
    //         return false;
    //     }
    //     return true;
    // };

    const customHttpRequest=(file)=>{
        console.log(file)
        //file= file.target.files[0]
        if (file !=null){
            console.log(file)
        }
        const formData = new FormData();
        formData.set('file', file.file);

        console.log(formData)
        upImage(formData).then((res)=>{
            console.log(res)
        })

    }

    const addBook = () => {
        console.log('Add book');
    };


    const exportData = () => {
        console.log('Export data');
    };

    const handleSelectionChange = (val) => {
        selected.value = val;
    };

    const importChapter = (book) => {
        dialogVisible.value=true
        console.log('Import chapter', book);
    };

    const editBook = (row) => {
        updateBook.value = { ...row };
        updateBookDialogVisible.value = true;
    };

    const handleCurrentChange = (page) => {
        pageNum.value = page;
        search();
    };

    const handleSizeChange = (size) => {
        pageSize.value = size;
        search();
    };

    // 初始化加载数据
    search();
</script>

<style scoped>
    .toolbar {
        margin-bottom: 20px;
    }
    .actions {
        margin-bottom: 20px;
    }
    .pagination-container {
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
    }
    .pagination-container {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
    .el-table .fixed-right {
        background: white;
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    }
    .avatar {
        width: 100px;
        height: 150px;
        display: block;
    }
    .avatar-uploader {
        display: inline-block;
        width: 100px;
        height: 150px;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }
    .dialog-footer {
        text-align: right;
        padding: 10px 0;
    }
</style>
